import { Plus } from '@nutui/icons-react-taro';
import { View } from '@tarojs/components';
import classnames from 'classnames';

import type { CSSProperties, FC } from 'react';

import './index.scss';

const PREFIX_CLS = 'm-hover-button';

interface HoverButtonProps {
  className?: string;
  style?: CSSProperties;
  onClick?: () => void;
  hasTabBar?: boolean;
}

const HoverButton: FC<HoverButtonProps> = ({
  className,
  style,
  onClick,
  hasTabBar = false,
}) => {
  return (
    <View
      className={classnames(PREFIX_CLS, className, {
        [`${PREFIX_CLS}-with-tabbar`]: hasTabBar,
      })}
      style={style}
      onClick={(e) => {
        e.stopPropagation();
        onClick?.();
      }}
    >
      <Plus className={`${PREFIX_CLS}-icon`} size={32} />
    </View>
  );
};

export default HoverButton;
